<template>
  <div style="height: 300px;background-color: #6d6d6d;overflow: auto" @scroll="handleScroll">
    <div style="background-color: green;height: 100px;border-bottom: 1px solid gold" v-for="(item,i) in array" :key="i" v-text="item"></div>
  </div>
</template>
<script>
export default {
  data: function () {
    return {
      array: ['one', 'two', 'three', 'four']
    }
  },
  methods: {
    handleScroll (event) {
      const container = event.target
      // 滚动内容的总高度，包括在视口之外的部分
      let scrollHeight = container.scrollHeight
      // 滚动容器中内容顶部被隐藏的像素数
      let scrollTop = container.scrollTop
      // 滚动容器的可见高度，即滚动容器在视口中的高度
      let clientHeight = container.clientHeight
      // 判断是否滑动到底部
      if (scrollHeight - scrollTop === clientHeight) {
        // 添加新的数据到array数组
        this.array.push('new item')
      }
    }
  }
}
</script>
<style>
</style>
